<template>
	<view class="template-page">
		<view class="content" flex="main:justify">
			<view v-if="!pdfDownload" class="flex_1 p-t-10 form-wrapper left-page">
				<button class='add-btn' type='primary' size="mini" @click='addFormPopup("decoration")'>+
					新增建构筑物及装修</button>
				<uni-table border stripe emptyText="暂无更多数据" :isHorizontalScroll="true">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">建筑名称</uni-th>
						<uni-th align="left">烧损面积m2</uni-th>
						<uni-th align="left">建造时价格(元)</uni-th>
						<uni-th align="left">使用时间(年)</uni-th>
						<uni-th align="left">折旧年限</uni-th>
						<uni-th align="left">烧损程度</uni-th>
						<uni-th align="left">烧损率</uni-th>
						<uni-th align="left">烧损面积</uni-th>
						<uni-th align="left">重置价值</uni-th>
						<uni-th align="left">操作</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in lossDecorationList" :key="index">
						<uni-td>{{item.name}}</uni-td>
						<uni-td>{{item.burningArea}}</uni-td>
						<uni-td>{{item.buildingValue}}</uni-td>
						<uni-td>{{item.buildedYear}}</uni-td>
						<uni-td>{{item.rebuildYear}}</uni-td>
						<uni-td>{{item.burnLevel}}</uni-td>
						<uni-td>{{item.burningRate}}</uni-td>
						<uni-td>{{item.burningArea1}}</uni-td>
						<uni-td>{{item.rebuildValue}}</uni-td>
						<uni-td>
							<div class="table-btns">
								<button class="edit-btn" type="primary" size="mini" @click="tableItemEdit(item, 'decoration')">编辑</button>
								<button type="warn" size="mini" @click="tableItemDelete(item, 'decoration')">删除</button>
							</div>
						</uni-td>
					</uni-tr>
				</uni-table>

				<uni-popup ref="decorationPopupRef" :mask-click="false" class="avue-dialog my-avue-dialog">
					<view class="add-form-popup" v-if="decorationForm">
						<view style="height: 580rpx; overflow: hidden;">
							<scroll-view scroll-y="true" style="height:100%;transition: 0.5s;" scroll-with-animation>
								<uni-forms ref='decorationFormRef' :modelValue="decorationForm" :rules="decorationLossRules">
									<view style='font-weight: bold;margin-bottom: 10px;font-size: 18px;'>
										{{ addFormPopupTitle }}
									</view>
									<uni-forms-item label="建筑名称" required name="name" label-width='114px'>
										<uni-easyinput type="text" v-model="decorationForm.name" placeholder="请输入建筑名称" />
									</uni-forms-item>
									<uni-forms-item label="烧损面积m2" required name="burningArea" label-width='114px'>
										<uni-number-box v-model="decorationForm.burningArea" @change='linkItemChange($event, "decoration", "burningArea1")' placeholder="请输入烧损面积m2" />
									</uni-forms-item>
									<uni-forms-item label="建造时价格(元)" required name="buildingValue" label-width='120px'>
										<uni-number-box v-model="decorationForm.buildingValue" @change='linkItemChange($event, "decoration", "rebuildValue")' :placeholder="'请输入建造时价格'" />
									</uni-forms-item>
									<uni-forms-item label="使用时间(年)" required name="buildedYear" label-width='114px'>
										<uni-number-box v-model="decorationForm.buildedYear" placeholder="请输入使用时间" />
									</uni-forms-item>
									<uni-forms-item label="价值判定" required name="userable" label-width='114px'>
										<uni-data-checkbox v-model="decorationForm.userable" :localdata="[
                      { text: '还有使用价值', value: true },
                      { text: '无使用价值', value: false }
                    ]" />
									</uni-forms-item>
									<uni-forms-item label="建筑类别" required name="category" label-width='114px'>
										<uni-data-picker placeholder="请选择建筑类别" popup-title="请选择" :localdata="categoryNameRange" v-model="decorationForm.category" @change='linkItemChange($event, "decoration", "rebuildYear")' @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed"></uni-data-picker>
									</uni-forms-item>
									<uni-forms-item label="折旧年限" required name="rebuildYear" label-width='114px'>
										<uni-number-box v-model="decorationForm.rebuildYear" placeholder="请输入折旧年限" />
									</uni-forms-item>
									<uni-forms-item label="烧损程度" label-width='114px'>
										<uni-data-select v-model="decorationForm.burnLevel" :localdata="burnLevelNameRange" @change='linkItemChange($event, "decoration", "burningRate")' placeholder="请选择烧损程度"></uni-data-select>
									</uni-forms-item>
									<uni-forms-item label="烧损率" required name="burningRate" label-width='114px'>
										<uni-number-box v-model="decorationForm.burningRate" placeholder="请输入烧损率" :min='2' :max='100' />
									</uni-forms-item>
									<uni-forms-item label="烧损面积" required name="burningArea1" label-width='114px'>
										<uni-number-box v-model="decorationForm.burningArea1" placeholder="请输入烧损面积" />
									</uni-forms-item>
									<uni-forms-item label="重置单价" label-width='114px'>
										<uni-number-box v-model="decorationForm.rebuildValue" placeholder="请输入重置价值" />
									</uni-forms-item>
								</uni-forms>
							</scroll-view>
						</view>
						<view class='buttons'>
							<button @click='addFormPopupSave("decoration")' class='btn' type='primary' size="mini">保存</button>
							<button @click='addFormPopupCancel("decoration")' class='btn' size="mini">取消</button>
						</view>
					</view>
				</uni-popup>

				<button class='add-btn' type='primary' size="mini" @click='addFormPopup("device")'>+ 新增设备及其他财产</button>
				<uni-table border stripe emptyText="暂无更多数据" :isHorizontalScroll="true">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">名称</uni-th>
						<uni-th align="left">数量</uni-th>
						<uni-th align="left">购进时单价</uni-th>
						<uni-th align="left">使用时间(年)</uni-th>
						<uni-th align="left">折旧年限</uni-th>
						<uni-th align="left">烧损程度</uni-th>
						<uni-th align="left">烧损率</uni-th>
						<uni-th align="left">重置价值</uni-th>
						<uni-th align="left">数量</uni-th>
						<uni-th align="left">操作</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in lossDeviceList" :key="index">
						<uni-td>{{item.name}}</uni-td>
						<uni-td>{{item.count}}</uni-td>
						<uni-td>{{item.buyingValue}}</uni-td>
						<uni-td>{{item.usedValue}}</uni-td>
						<uni-td>{{item.reusedYear}}</uni-td>
						<uni-td>{{item.burnLevel}}</uni-td>
						<uni-td>{{item.burningRate}}</uni-td>
						<uni-td>{{item.unitPrice}}</uni-td>
						<uni-td>{{item.unitCount}}</uni-td>

						<uni-td>
							<div class="table-btns">
								<button class="edit-btn" type="primary" size="mini" @click="tableItemEdit(item, 'device')">编辑</button>
								<button type="warn" size="mini" @click="tableItemDelete(item, 'device')">删除</button>
							</div>
						</uni-td>
					</uni-tr>
				</uni-table>

				<uni-popup ref="devicePopupRef" :mask-click="false" class="avue-dialog my-avue-dialog">
					<view class="add-form-popup" v-if="deviceForm">
						<view style="height: 580rpx; overflow: hidden;">
							<scroll-view scroll-y="true" style="height:100%;transition: 0.5s;" scroll-with-animation>
								<uni-forms ref='deviceFormRef' :modelValue="deviceForm" :rules="deviceLossRules">
									<view style='font-weight: bold;margin-bottom: 10px;font-size: 18px;'>
										{{ addFormPopupTitle }}
									</view>
									<uni-forms-item label="名称" required name="name" label-width='120px'>
										<uni-easyinput type="text" v-model="deviceForm.name" placeholder="请输入名称" />
									</uni-forms-item>
									<uni-forms-item label="数量" required name="count" label-width='120px'>
										<uni-number-box v-model="deviceForm.count" @change='linkItemChange($event, "device", "unitCount")' placeholder="请输入数量" />
									</uni-forms-item>
									<uni-forms-item label="购进时单价 (元)" required name="buyingValue" label-width='120px'>
										<uni-number-box v-model="deviceForm.buyingValue" @change='linkItemChange($event, "device", "unitPrice")' placeholder="请输入单价" />
									</uni-forms-item>
									<uni-forms-item label="已使用时间 (年)" required name="usedValue" label-width='120px'>
										<uni-number-box v-model="deviceForm.usedValue" placeholder="请输入使用时间" />
									</uni-forms-item>
									<uni-forms-item label="价值判定" required name="userable" label-width='120px'>
										<uni-data-checkbox v-model="deviceForm.userable" :localdata="[
                      { text: '还有使用价值', value: true },
                      { text: '无使用价值', value: false }
                    ]" />
									</uni-forms-item>
									<uni-forms-item label="设备类别" required name="category" label-width='120px'>
										<uni-data-picker placeholder="请选择设备类别" popup-title="请选择" :localdata="categoryNameRange" v-model="deviceForm.category" @change='linkItemChange($event, "device", "reusedYear")' @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed"></uni-data-picker>
									</uni-forms-item>
									<uni-forms-item label="折旧年限 (年)" required name="reusedYear" label-width='120px'>
										<uni-number-box v-model="deviceForm.reusedYear" placeholder="请输入折旧年限" />
									</uni-forms-item>
									<uni-forms-item label="烧损程度" required name="burnLevel" label-width='120px'>
										<uni-data-select v-model="deviceForm.burnLevel" :localdata="burnLevelNameRange" @change='linkItemChange($event, "device", "burningRate")' placeholder="请选择烧损程度"></uni-data-select>
									</uni-forms-item>
									<uni-forms-item label="烧损率 (%)" required name="burningRate" label-width='120px'>
										<uni-number-box v-model="deviceForm.burningRate" placeholder="请输入烧损率" />
									</uni-forms-item>
									<uni-forms-item label="重置价值 (单价)" required name="unitPrice" label-width='120px'>
										<uni-number-box v-model="deviceForm.unitPrice" placeholder="请输入重置价值（单价）" />
									</uni-forms-item>
									<uni-forms-item label="重置价值 (数量)" required name="unitCount" label-width='120px'>
										<uni-number-box v-model="deviceForm.unitCount" placeholder="请输入数量" />
									</uni-forms-item>
								</uni-forms>
							</scroll-view>
						</view>
						<view class='buttons'>
							<button @click='addFormPopupSave("device")' class='btn' type='primary' size="mini">保存</button>
							<button @click='addFormPopupCancel("device")' class='btn' size="mini">取消</button>
						</view>
					</view>
				</uni-popup>

				<u-picker mode="time" :defaultTime="timeObj.defaultStartTime" v-model="timeObj.show" :params="timeObj.params" @confirm="confirmTimePicker"></u-picker>
				<view class="item-block">
					<view class="item-line-2">
						<view class="item-line half sign-wrapper">
							<view class="label">填表人：</view>
							<view class="form-input-item">
								<image class="sign-img" v-show="formData.preparer" :src="formData.preparer" />
								<text style="color: #1e9fff" @click="startSign('formData', 'preparer')">签名</text>
							</view>
						</view>
						<view class="item-line half">
							<view class="label">填表时间：</view>
							<view class="form-input-item picker">
								<u-input class='picker-time' v-model="formData.preparerTime" disabled @tap="onShowTimePicker('preparerTime', 'datetime')" placeholder="请选择填表时间" />
							</view>
						</view>
					</view>
					<view class="item-line-2">
						<view class="item-line half">
							<view class="label">联系人：</view>
							<view class="form-input-item">
								<uni-easyinput type="text" v-model="formData.contactor" placeholder="请输入联系人" />
							</view>
						</view>
						<view class="item-line half">
							<view class="label">联系电话：</view>
							<view class="form-input-item">
								<uni-easyinput type="number" v-model="formData.contactorPhone" placeholder="请输入联系电话" />
							</view>
						</view>
					</view>
					<view class="item-line">
						<view class="label">统计单位：</view>
						<view class="form-input-item">
							<uni-easyinput type="text" v-model="formData.statisticsOrg" placeholder="请输入统计单位" />
						</view>
					</view>
					<view class="item-line-2">
						<view class="item-line half">
							<view class="label">统计人：</view>
							<view class="form-input-item">
								<uni-easyinput type="text" v-model="formData.statisticstor" placeholder="请输入统计人" />
							</view>
						</view>
						<view class="item-line half">
							<view class="label">统计时间：</view>
							<view class="form-input-item picker">
								<u-input class='picker-time' v-model="formData.statisticsTime" disabled @tap="onShowTimePicker('statisticsTime', 'date')" placeholder="请选择统计时间" />
							</view>
						</view>
					</view>
					<view class="item-line-2">
						<view class="item-line half">
							<view class="label">审批人：</view>
							<view class="form-input-item">
								<uni-easyinput type="text" v-model="formData.approvaltor" placeholder="请输入审批人" />
							</view>
						</view>
						<view class="item-line half">
							<view class="label">审批时间：</view>
							<view class="form-input-item">
								<u-input class='picker-time' v-model="formData.approvalTime" disabled @tap="onShowTimePicker('approvalTime', 'date')" placeholder="请选择审批时间" />
							</view>
						</view>
					</view>
				</view>
				<button @click="cleanerForm" size="mini" style='display: inline-block;margin-left: 50%;transform: translateX(-50%);'>清空</button>
			</view>
			<LossTem class="flex_1 template" :formData="formData" :pdfDownload="pdfDownload" />
		</view>
		<FooterBtn class="footer-btn" :pdfDownload="pdfDownload" @submit="submitForm" @cancel="handleCancel" />
		<DownloadBtn class="download-btn" :pdfDownload="pdfDownload" title="火灾直接财产损失申报统计表" :formData="formData" :moduleName="currentModule.moduleName" @saveData="submitFormBackBefore" />
	</view>
</template>

<script>
	import DataFlow from '@/pagesH5/mixins/DataFlow.js'
	import DownloadBtn from '@/pagesH5/components/DownloadBtn'
	import FooterBtn from '@/pagesH5/components/FooterBtn'
	import FileChoose from '../../uni_modules/file-choose/components/file-choose/file-choose.vue'
	import UniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	import config from '../../common/config'
	import UniDataSelect from '../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue'
	import UButton from '../../uview-ui/components/u-button/u-button.vue'
	import webEdit from '../../uni_modules/idcims-webEdit/components/webEdit/webEdit.vue'
	import eventBus from '../../common/eventBus'

	import {
		getLocalNotice,
		uploadLocalFile
	} from '@/static/common/js/padLocalFileHandler.js'
	import LossTem from '@/pagesH5/components/inquiryTemplate/lossTem.vue'

	export default {
		mixins: [DataFlow],
		components: {
			webEdit,
			UButton,
			UniDataSelect,
			UniPopup,
			FileChoose,
			LossTem,
			DownloadBtn,
			FooterBtn
		},
		data() {
			return {
				decorationForm: {
					userable: true
				},
				deviceForm: {
					userable: true
				},
				addFormPopupTitle: '添加', // popup 标题
				categoryNameRange: [{
						"text": "1-生产，经营用房-无",
						"value1": null,
						"value": "1-生产，经营用房-无",
						"children": [{
								"text": "2-钢结构-40",
								"value1": 40,
								"value": "2-钢结构-40",
								"children": []
							},
							{
								"text": "3-钢筋混凝土结构-35",
								"value1": 35,
								"value": "3-钢筋混凝土结构-35",
								"children": []
							},
							{
								"text": "4-砖混结构、砖木结构-30",
								"value1": 30,
								"value": "4-砖混结构、砖木结构-30",
								"children": []
							},
							{
								"text": "5-受腐蚀生产用房、危险品专用仓库-25",
								"value1": 25,
								"value": "5-受腐蚀生产用房、危险品专用仓库-25",
								"children": []
							}
						]
					},
					{
						"text": "6-非生产、经营用房-45",
						"value1": 45,
						"value": "6-非生产、经营用房-45",
						"children": []
					},
					{
						"text": "7-简易用房-8",
						"value1": 8,
						"value": "7-简易用房-8",
						"children": []
					},
					{
						"text": "8-居民住宅-无",
						"value1": null,
						"value": "8-居民住宅-无",
						"children": [{
								"text": "9-钢筋混凝土结构-70",
								"value1": 70,
								"value": "9-钢筋混凝土结构-70",
								"children": []
							},
							{
								"text": "10-砖混结构-50",
								"value1": 50,
								"value": "10-砖混结构-50",
								"children": []
							},
							{
								"text": "11-砖木结构-40",
								"value1": 40,
								"value": "11-砖木结构-40",
								"children": []
							},
							{
								"text": "12-简易结构-15",
								"value1": 15,
								"value": "12-简易结构-15",
								"children": []
							},
							{
								"text": "13-蒙古包、藏包等帐篷类住房-7",
								"value1": 7,
								"value": "13-蒙古包、藏包等帐篷类住房-7",
								"children": []
							}
						]
					},
					{
						"text": "14-房屋装修-无",
						"value1": null,
						"value": "14-房屋装修-无",
						"children": [{
								"text": "15-办公、居民用房装修-10",
								"value1": 10,
								"value": "15-办公、居民用房装修-10",
								"children": []
							},
							{
								"text": "16-宾馆、饭店、商场、公共娱乐场所及其他场所装修-5",
								"value1": 5,
								"value": "16-宾馆、饭店、商场、公共娱乐场所及其他场所装修-5",
								"children": []
							}
						]
					},
					{
						"text": "17-构筑物-无",
						"value1": null,
						"value": "17-构筑物-无",
						"children": [{
								"text": "18-水电站大坝，水库-50",
								"value1": 50,
								"value": "18-水电站大坝，水库-50",
								"children": []
							},
							{
								"text": "19-铁路线路上部建筑和铁路线上的桥梁、涵洞、隧道-40",
								"value1": 40,
								"value": "19-铁路线路上部建筑和铁路线上的桥梁、涵洞、隧道-40",
								"children": []
							},
							{
								"text": "20-机场跑道、停机坪、港口码头基础设施-35",
								"value1": 35,
								"value": "20-机场跑道、停机坪、港口码头基础设施-35",
								"children": []
							},
							{
								"text": "21-其它构筑物-20",
								"value1": 20,
								"value": "21-其它构筑物-20",
								"children": []
							}
						]
					},
					{
						"text": "22-设备-无",
						"value1": null,
						"value": "22-设备-无",
						"children": [{
								"text": "23-动力设备、传导设备、非生产设备及器具设备工具-18",
								"value1": 18,
								"value": "23-动力设备、传导设备、非生产设备及器具设备工具-18",
								"children": []
							},
							{
								"text": "24-复印机、文字处理机、打字设备、电视机、电子计算机及系统设备、真机、电话机、移动无线电话机-5",
								"value1": 5,
								"value": "24-复印机、文字处理机、打字设备、电视机、电子计算机及系统设备、真机、电话机、移动无线电话机-5",
								"children": []
							},
							{
								"text": "25-运输设备，机械设备，自动化控制及仪器仪表自动化、半自动化控制设备通用测试仪器设备，工业炉窖，工具及其他生产用具等通用设备-10",
								"value1": 10,
								"value": "25-运输设备，机械设备，自动化控制及仪器仪表自动化、半自动化控制设备通用测试仪器设备，工业炉窖，工具及其他生产用具等通用设备-10",
								"children": []
							},
							{
								"text": "26-电力工业专用输电线路-32",
								"value1": 32,
								"value": "26-电力工业专用输电线路-32",
								"children": []
							},
							{
								"text": "27-电力工业专用配电线路-15",
								"value1": 15,
								"value": "27-电力工业专用配电线路-15",
								"children": []
							},
							{
								"text": "28-电力工业专用发电及供热设备、变电配电设备-20",
								"value1": 20,
								"value": "28-电力工业专用发电及供热设备、变电配电设备-20",
								"children": []
							},
							{
								"text": "29-造船工业专用设备-18",
								"value1": 18,
								"value": "29-造船工业专用设备-18",
								"children": []
							},
							{
								"text": "30-核工业专用设备、核能发电设备-22",
								"value1": 22,
								"value": "30-核工业专用设备、核能发电设备-22",
								"children": []
							},
							{
								"text": "31-公用事业企业专用自来水、燃气设备-20",
								"value1": 20,
								"value": "31-公用事业企业专用自来水、燃气设备-20",
								"children": []
							},
							{
								"text": "32-机械工业，石油工业，化学工业，医药工业，电子仪表电讯工业，冶金工业，矿山、煤炭及森林工业，建材工业，纺织工业，轻工业等专用设备-10",
								"value1": 10,
								"value": "32-机械工业，石油工业，化学工业，医药工业，电子仪表电讯工业，冶金工业，矿山、煤炭及森林工业，建材工业，纺织工业，轻工业等专用设备-10",
								"children": []
							},
							{
								"text": "33-微型载货汽车（含越野车）、带拖挂载货汽车、矿山作业专用车及各类出租汽车-8",
								"value1": 8,
								"value": "33-微型载货汽车（含越野车）、带拖挂载货汽车、矿山作业专用车及各类出租汽车-8",
								"children": []
							},
							{
								"text": "34-轻型载货汽车、大型客车、中型客车、其它机动车辆-10",
								"value1": 10,
								"value": "34-轻型载货汽车、大型客车、中型客车、其它机动车辆-10",
								"children": []
							},
							{
								"text": "35-输用飞机-10",
								"value1": 10,
								"value": "35-输用飞机-10",
								"children": []
							},
							{
								"text": "36-专用运钞车-7",
								"value1": 7,
								"value": "36-专用运钞车-7",
								"children": []
							},
							{
								"text": "37-摩托车-5",
								"value1": 5,
								"value": "37-摩托车-5",
								"children": []
							},
							{
								"text": "38-电气化铁路供电系统-10",
								"value1": 10,
								"value": "38-电气化铁路供电系统-10",
								"children": []
							},
							{
								"text": "39-港口装卸机械及设备、运输船舶及辅助船舶、铁路机车车辆和通讯线路-16",
								"value1": 16,
								"value": "39-港口装卸机械及设备、运输船舶及辅助船舶、铁路机车车辆和通讯线路-16",
								"children": []
							},
							{
								"text": "40-铁路通信信号设备、通信导航设备、邮电通信电信机械及电源设备-7",
								"value1": 7,
								"value": "40-铁路通信信号设备、通信导航设备、邮电通信电信机械及电源设备-7",
								"children": []
							},
							{
								"text": "41-邮电通信线路、邮政机械设备-10",
								"value1": 10,
								"value": "41-邮电通信线路、邮政机械设备-10",
								"children": []
							},
							{
								"text": "42-集装箱-7",
								"value1": 7,
								"value": "42-集装箱-7",
								"children": []
							},
							{
								"text": "43-供电系统设备、供热系统设备、中央空调设备-18",
								"value1": 18,
								"value": "43-供电系统设备、供热系统设备、中央空调设备-18",
								"children": []
							},
							{
								"text": "44-电梯、自动扶梯-10",
								"value1": 10,
								"value": "44-电梯、自动扶梯-10",
								"children": []
							},
							{
								"text": "45-消防安全设施-6",
								"value1": 6,
								"value": "45-消防安全设施-6",
								"children": []
							},
							{
								"text": "46- 经营柜台、货架-4",
								"value1": 4,
								"value": "46- 经营柜台、货架-4",
								"children": []
							},
							{
								"text": "47-酱醋类腐蚀性严重的加工设备及器具、粮油原料整理筛选设备、烘干设备、油池、油罐-8",
								"value1": 8,
								"value": "47-酱醋类腐蚀性严重的加工设备及器具、粮油原料整理筛选设备、烘干设备、油池、油罐-8",
								"children": []
							},
							{
								"text": "48-音响设备、电冰箱、空调器-5",
								"value1": 5,
								"value": "48-音响设备、电冰箱、空调器-5",
								"children": []
							},
							{
								"text": "49-化纤地毯、混织地毯-3",
								"value1": 3,
								"value": "49-化纤地毯、混织地毯-3",
								"children": []
							},
							{
								"text": "50-纯毛地毯-8",
								"value1": 8,
								"value": "50-纯毛地毯-8",
								"children": []
							},
							{
								"text": "51-办公用家具设备-15",
								"value1": 15,
								"value": "51-办公用家具设备-15",
								"children": []
							},
							{
								"text": "52-洗涤设备、厨房用具设备、营业用家具设备、游乐场设备、健身房设备-8",
								"value1": 8,
								"value": "52-洗涤设备、厨房用具设备、营业用家具设备、游乐场设备、健身房设备-8",
								"children": []
							},
							{
								"text": "53-拖拉机、机引农具及渔业、牧为机械-6",
								"value1": 6,
								"value": "53-拖拉机、机引农具及渔业、牧为机械-6",
								"children": []
							},
							{
								"text": "54-农用飞机及作业设备、谷物联合收获机、排灌机械及大型喷灌机、粮食处理机械、农田基本建设机械、农机修理专用设备及测试设备-12",
								"value1": 12,
								"value": "54-农用飞机及作业设备、谷物联合收获机、排灌机械及大型喷灌机、粮食处理机械、农田基本建设机械、农机修理专用设备及测试设备-12",
								"children": []
							},
							{
								"text": "55-重机械、挖掘机械、基础及凿井机械，皮带螺旋运输机械、土方铲运机械、钢筋及混凝土机械-10",
								"value1": 10,
								"value": "55-重机械、挖掘机械、基础及凿井机械，皮带螺旋运输机械、土方铲运机械、钢筋及混凝土机械-10",
								"children": []
							},
							{
								"text": "56-单转电动起重机、内燃凿岩机、风动凿岩机、电动凿岩机、等离子切割机、磁力氧气切割机、混凝土输送泵-5",
								"value1": 5,
								"value": "56-单转电动起重机、内燃凿岩机、风动凿岩机、电动凿岩机、等离子切割机、磁力氧气切割机、混凝土输送泵-5",
								"children": []
							},
							{
								"text": "57-材料试验设备、测定仪器、计量仪器、探伤仪器、测绘仪器-8",
								"value1": 8,
								"value": "57-材料试验设备、测定仪器、计量仪器、探伤仪器、测绘仪器-8",
								"children": []
							},
							{
								"text": "58-编采设备、专业用录音设备、组合音像设备、盒式音带加工设备、录像设备、生产用复印设备、激光照排设备、远程数据传输设备-6",
								"value1": 6,
								"value": "58-编采设备、专业用录音设备、组合音像设备、盒式音带加工设备、录像设备、生产用复印设备、激光照排设备、远程数据传输设备-6",
								"children": []
							},
							{
								"text": "59-唱机生产设备、电子分色设备、电影制片设备、电影放映机、幻灯机、照相机、相片冲印设备、闭路电视播放设备、安全监控设备-10",
								"value1": 10,
								"value": "59-唱机生产设备、电子分色设备、电影制片设备、电影放映机、幻灯机、照相机、相片冲印设备、闭路电视播放设备、安全监控设备-10",
								"children": []
							},
							{
								"text": "60-唱片加工设备、印刷设备-12",
								"value1": 12,
								"value": "60-唱片加工设备、印刷设备-12",
								"children": []
							}
						]
					},
					{
						"text": "61-乐器-无",
						"value1": null,
						"value": "61-乐器-无",
						"children": [{
								"text": "62-钢琴-16",
								"value1": 16,
								"value": "62-钢琴-16",
								"children": []
							},
							{
								"text": "63-电子乐器-7",
								"value1": 7,
								"value": "63-电子乐器-7",
								"children": []
							},
							{
								"text": "64-其他乐器-8",
								"value1": 8,
								"value": "64-其他乐器-8",
								"children": []
							}
						]
					},
					{
						"text": "65-其它设备-10",
						"value1": 10,
						"value": "65-其它设备-10",
						"children": []
					},
					{
						"text": "66-货物成本-1",
						"value1": 1,
						"value": "66-货物成本-1",
						"children": []
					}
				],
				burnLevelNameRange: [{
						"searchValue": null,
						"createBy": "admin",
						"createTime": "2022-04-13 11:08:04",
						"updateBy": null,
						"updateTime": null,
						"remark": "梁、柱、墙、板等承重构件及非承重构件保护层，外观受损或局部稍有剥落，主题结构保持完好。少量的门、窗，装修及室内水卫、电照、暖气、煤气具与特种设备（消火栓和避雷装置等公共设施）稍有变形或局部烧损。采用小修工程修复，即可恢复正常使用功能。\n\n符合下列条件之一：\n\n1.仅外观受损，使用功能和精确度未受影响，通过一般的维护、保养，即可修复。\n2.少量零部件、附属件受损，使用功能和精确度基本未受影响，通过小修，进行简单的修理或更换，即可修复。",
						"params": {},
						"dictCode": 119,
						"dictSort": 1,
						"dictLabel": "轻微烧损",
						"dictValue": "10",
						"dictType": "burn_type",
						"cssClass": null,
						"listClass": "default",
						"isDefault": "N",
						"status": "0",
						"default": false,
						"text": "轻微烧损",
						"value": "10"
					},
					{
						"searchValue": null,
						"createBy": "admin",
						"createTime": "2022-04-13 11:08:32",
						"updateBy": null,
						"updateTime": null,
						"remark": "梁、柱、墙、板等承重构件及非承重构件保护层，局部剥落或碳化，个别主体构件出现细小裂缝或烧损。木结构门、窗、装修局部碳化，翘裂或烧损。钢结构门、窗局部变形、翘曲。室内水卫、电照、暖气、煤气具与特种设备（消火栓和避雷装置等公共设施）局部变形或烧损。修缮时需牵动或拆除少量主体结构，采用中修工程修复，方能恢复正常使用功能。\n符合下列条件：\n\n部分零部件、附属件损坏，导致部分使用功能和精确度降低或丧失，需通过项修，部分拆卸分解，修理或更换烧损件，才能修复。",
						"params": {},
						"dictCode": 120,
						"dictSort": 2,
						"dictLabel": "一般烧损",
						"dictValue": "40",
						"dictType": "burn_type",
						"cssClass": null,
						"listClass": "default",
						"isDefault": "N",
						"status": "0",
						"default": false,
						"text": "一般烧损",
						"value": "40"
					},
					{
						"searchValue": null,
						"createBy": "admin",
						"createTime": "2022-04-13 11:08:57",
						"updateBy": null,
						"updateTime": null,
						"remark": "梁、柱、墙、板等承重构件及非承重构件保护层，部分严重剥落，局部露筋或开裂，个别主体结构倾斜或塌落。木结构门、窗、装修大部分严重碳化或烧损，钢结构门、窗大部分严重变形，部分脱落。室内水卫、电照、暖气、煤气具与特种设备（消火栓和避雷装置等公共设施）大部分严重变形或烧损，修缮时需牵动或拆除部分主体结构，采用大修工程修复，方能恢复正常使用功能。符合下列条件之一：\n\n1.大部分零部件、附属件或关键零部件损坏，导致大部分使用功能和精确度降低或丧失，必须通过大修，全部拆卸分解，修理或更换烧损件，才能修复。\n2.部分使用功能或精确度虽不能修复到火灾前的使用状态，但能满足使用要求，尚可使用。",
						"params": {},
						"dictCode": 121,
						"dictSort": 3,
						"dictLabel": "严重烧损",
						"dictValue": "70",
						"dictType": "burn_type",
						"cssClass": null,
						"listClass": "default",
						"isDefault": "N",
						"status": "0",
						"default": false,
						"text": "严重烧损",
						"value": "70"
					},
					{
						"searchValue": null,
						"createBy": "admin",
						"createTime": "2022-04-13 11:09:47",
						"updateBy": null,
						"updateTime": null,
						"remark": "梁、柱、墙、板等承重构件及非承重构件保护层，大部分或全部严重剥落、露筋或断裂，主体结构严重损坏，丧失使用功能，有倒塌危险。门、窗、装修及室内水卫、电照、暖气、煤气具与特种设备（消火栓和避雷装置等公共设施）大部分或全部烧毁脱落。已无修复价值，需采用翻修工程，拆除重建。符合下列条件之一：\n\n1.烧损后无法修复使用。\n2.大部分零部件、附属件或关键零部件损坏、失去了原有的全部使用价值。\n3.修复费达到国家有关部门规定的报废标准。\n4.经过鉴定，大修后虽能修复，但不如更新经济的；或大修后不能满足使用要求的。",
						"params": {},
						"dictCode": 122,
						"dictSort": 4,
						"dictLabel": "全部烧损",
						"dictValue": "100",
						"dictType": "burn_type",
						"cssClass": null,
						"listClass": "default",
						"isDefault": "N",
						"status": "0",
						"default": false,
						"text": "全部烧损",
						"value": "100"
					}
				],

				decorationLossObjOption: [{
						type: 'selection',
						fixed: false,
						width: 50
					},
					{
						name: 'name',
						label: '建筑名称'
					},
					{
						name: 'burningArea',
						label: '烧损面积m2'
					},
					{
						name: 'buildingValue',
						label: '建造时价格(元)'
					},
					{
						name: 'buildedYear',
						label: '使用时间(年)'
					},
					// { name: 'userable', label: '价值判定' },
					// { name: 'category', label: '建筑类别'},
					{
						name: 'rebuildYear',
						label: '折旧年限'
					},
					{
						name: 'burnLevel',
						label: '烧损程度'
					},
					{
						name: 'burningRate',
						label: '烧损率'
					},
					{
						name: 'burningArea1',
						label: '烧损面积'
					},
					{
						name: 'rebuildValue',
						label: '重置价值'
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [{
								name: '编辑',
								func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							},
							{
								name: '删除',
								type: 'warn',
								func: "dele"
							},
						]
					},
				],
				deviceLossObjOption: [{
						type: 'selection',
						fixed: false,
						width: 50
					},
					{
						name: 'name',
						label: '名称'
					},
					{
						name: 'count',
						label: '数量'
					},
					{
						name: 'buyingValue',
						label: '购进时单价'
					},
					{
						name: 'usedValue',
						label: '使用时间'
					},
					// { name: 'userable', label: '价值判定' },
					// { name: 'category', label: '设备类别'},
					{
						name: 'reusedYear',
						label: '折旧年限'
					},
					{
						name: 'burnLevel',
						label: '烧损程度'
					},
					{
						name: 'burningRate',
						label: '烧损率'
					},
					{
						name: 'unitPrice',
						label: '重置价值'
					},
					{
						name: 'unitCount',
						label: '数量'
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [{
								name: '编辑',
								func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							},
							{
								name: '删除',
								type: 'warn',
								func: "dele"
							},
						]
					},
				],
				decorationLossRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: "请输入建筑名称",
							trigger: "blur"
						}]
					},
					burningArea: {
						rules: [{
							required: true,
							errorMessage: "请输入烧损面积m2",
							trigger: "blur"
						}]
					},
					buildingValue: {
						rules: [{
							required: true,
							errorMessage: "请输入建造时价格",
							trigger: "blur"
						}]
					},
					buildedYear: {
						rules: [{
							required: true,
							errorMessage: "请输入使用时间",
							trigger: "blur"
						}]
					},
					userable: {
						rules: [{
							required: true,
							errorMessage: "请选择价值判定",
							trigger: "blur"
						}]
					},
					rebuildYear: {
						rules: [{
							required: true,
							errorMessage: "折旧年限",
							trigger: "blur"
						}]
					},
					burningRate: {
						rules: [{
							required: true,
							errorMessage: "请输入烧损率",
							trigger: "blur"
						}]
					},
					burningArea1: {
						rules: [{
							required: true,
							errorMessage: "请输入烧损面积",
							trigger: "blur"
						}]
					}
				},
				deviceLossRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: "请输入名称",
							trigger: "blur"
						}]
					},
					count: {
						rules: [{
							required: true,
							errorMessage: "请输入数量",
							trigger: "blur"
						}]
					},
					category: {
						rules: [{
							required: true,
							errorMessage: "请输入设备类别",
							trigger: "blur"
						}]
					},
					reusedYear: {
						rules: [{
							required: true,
							errorMessage: "请输入折旧年限",
							trigger: "blur"
						}]
					},
					burnLevel: {
						rules: [{
							required: true,
							errorMessage: "请输入烧损程度",
							trigger: "blur"
						}]
					},
					burningRate: {
						rules: [{
							required: true,
							errorMessage: "请输入单价",
							trigger: "blur"
						}]
					},
					unitPrice: {
						rules: [{
							required: true,
							errorMessage: "请输入烧损率",
							trigger: "blur"
						}]
					},
					unitCount: {
						rules: [{
							required: true,
							errorMessage: "请输入数量",
							trigger: "blur"
						}]
					}
				},
				onLoadOption: {},
				timeObj: {
					type: '',
					show: false,
					defaultTime: new Date(),
					timeFormat: 'yyyy-mm-dd hh:MM:ss',
					params: {
						year: true,
						month: true,
						day: true,
						hour: null,
						minute: null,
						second: null,
						timestamp: true
					}
				}
			};
		},
		computed: {
			lossDecorationList() {
				return this.formData?.lossDecorationList || []
			},
			lossDeviceList() {
				return this.formData?.lossDeviceList || []
			},
		},
		onShow() {
			eventBus.$on('get-sign-event', (base64, key, signKey) => {
				this.$nextTick(() => {
					this.$set(this.formData, signKey, base64)
				})
			})
		},
		methods: {
			onShowTimePicker(type, dateType) {
				console.log('dateType: ', dateType)
				this.timeObj.type = type;
				if (dateType === 'datetime') {
					this.timeObj.params.hour = true
					this.timeObj.params.minute = true
					this.timeObj.params.second = true
					this.timeObj.timeFormat = 'yyyy-mm-dd hh:MM:ss'
				} else if (dateType === 'date') {
					this.timeObj.params.hour = false
					this.timeObj.params.minute = false
					this.timeObj.params.second = false
					this.timeObj.timeFormat = 'yyyy-mm-dd'
				}
				if (this.formData[this.timeObj.type]) {
					this.timeObj.defaultStartTime = this.formData[this.timeObj.type]
				}
				this.timeObj.show = true;
				console.log('timeObj: ', this.timeObj)
			},
			confirmTimePicker(e) {
				let timeFormat = this.$u.timeFormat(e.timestamp * 1000, this.timeObj.timeFormat);
				console.log('timeFormat: ', timeFormat)
				this.formData[this.timeObj.type] = timeFormat;
				console.log(this.timeObj.type, this.formData)
			},
			startSign(obj, val) {
				uni.navigateTo({
					url: val ? '../components/signComponent?obj=' + obj + '&sign=' + val : '../components/signComponent'
				})
			},
			// 表格行编辑
			tableItemEdit(val, key) {
				this.addFormPopupTitle = '编辑'
				const keyRef = key + 'PopupRef'
				const keyForm = key + 'Form'

				this.currentEditFormObj = val
				this[keyForm] = val
				this.$refs[keyRef].open()

				this.formSaveBtnDisabled = false
			},
			// 表格行删除
			tableItemDelete(obj, key) {
				const capitalize = key.charAt(0).toUpperCase() + key.slice(1)
				const keyList = 'loss' + capitalize + 'List'
				const formData = this.formData;
				const formList = formData[keyList];
				let index = formList.findIndex(item => item.key == obj.key)
				if (index != -1) {
					formList.splice(index, 1)
				}
				this.formData[keyList] = formList
			},
			// 表格添加表单popup
			addFormPopup(key) {
				const refKey = key + 'PopupRef'
				this.addFormPopupTitle = '添加'
				this.$refs[refKey].open()
			},
			// 表格添加表单保存
			addFormPopupSave(key) {
				const keyPopupRef = key + 'PopupRef'
				const keyFormRef = key + 'FormRef'
				const capitalize = key.charAt(0).toUpperCase() + key.slice(1)
				const keyList = 'loss' + capitalize + 'List' // lossDecorationList
				const keyForm = key + 'Form'

				const formData = this.formData;
				const formList = formData[keyList];
				const form = this[keyForm];
				let timeKey = new Date().getTime()
				this.$refs[keyFormRef].validate().then(res => {
					if (this.addFormPopupTitle === '添加') {
						formList.push({
							...form,
							key: timeKey
						})
					} else if (this.addFormPopupTitle === '编辑') {
						const index = formList.findIndex(item => item.key === this.currentEditFormObj.key)
						formList[index] = form
						this.$set(this.formData, keyList, formList)
					}
					this.$refs[keyPopupRef].close()
					this[keyForm] = this.$options.data()[keyForm]
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 表格添加表单取消
			addFormPopupCancel(key) {
				const keyRef = key + 'PopupRef'
				const keyForm = key + 'Form'
				this.$refs[keyRef].close()
				this[keyForm] = this.$options.data()[keyForm]
			},
			// 输入项联动修改
			linkItemChange(event, key, otherVal) {
				console.log(event);
				console.log(key);
				console.log(otherVal);
				const keyForm = key + 'Form'
				console.log(this[keyForm]);

				if (otherVal === 'rebuildValue') {
					this[keyForm][otherVal] = event + 5
				} else if (otherVal === 'rebuildYear' || otherVal === 'reusedYear') {
					const value_year = event.detail.value[event.detail.value.length - 1].value.split('-')[2];
					console.log(value_year);
					this[keyForm][otherVal] = parseInt(value_year);
					console.log(this[keyForm][otherVal]);
				} else {
					this[keyForm][otherVal] = parseInt(event)
				}
			},
			// 建筑类别接口
			getCategoryNameList() {
				// fetch(this.baseUrl + '/archives/depreciat/listTree', {
				//   method: 'GET',
				//   headers: {
				//     ...this.headers,
				//     'Content-Type': 'application/x-www-form-urlencoded'
				//   },
				//   mode: 'cors'
				// }).then(e => e.json()).then(res => {
				// let url_ = config.baseUrl + '/system/dict/data/type/' + url + '/'
				uni.request({
					url: config.baseUrl + config.adminPath + '/archives/depreciat/listTree',
					data: {},
					header: {
						'Authorization': 'Bearer ' + this.token
					},
				}).then(res1 => {
					console.log('res1: ', res1)
					let res = res1[1]
					console.log('res: ', res)
					if (res.data.code === 200) {
						const pruneTree = tree => {
							const {
								name,
								value,
								children
							} = tree;

							return {
								text: name,
								value1: value,
								value: name,
								children: children ? children.map(pruneTree) : []
							}
						}

						// 删除冗余数据，只保留text、value和children属性
						// const prunedData = res.data.data.map(tree => pruneTree(tree));
						const prunedData = res.data.data.map(pruneTree);

						// 输出结果
						console.log('prunedData: ', prunedData);
						this.categoryNameRange = prunedData
						console.log('categoryNameRange: ', this.categoryNameRange);
					}
				});
			},
			// 烧损程度下拉列表
			getBurnLevelNameRangeList() {
				uni.request({
					url: config.baseUrl + config.adminPath + '/system/dict/data/type/burn_type',
					data: {},
					header: {
						'Authorization': 'Bearer ' + this.token
					}
				}).then(res1 => {
					console.log('burn_type res1: ', res1[1])
					let res = res1[1]
					console.log('burn_type res: ', res)
					res.data.data.map(item => {
						item.text = item.dictLabel
						item.value = item.dictValue
					})
					this.burnLevelNameRange = res.data.data
					console.log('burnLevelNameRange: ', this.burnLevelNameRange)
				}).catch(err => {
					console.log('burn_type err: ', err)
				})
			},
			onnodeclick(e) {
				console.log(e)
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			initForm() {
				let local_current_row = null
				if (uni.getStorageSync("currentRow")) {
					local_current_row = JSON.parse(uni.getStorageSync("currentRow"))
					console.log('local_current_row: ', local_current_row)
				}
				const now = new Date()
				const currentTime = this.$u.timeFormat(now, 'yyyy-mm-dd')
				const {
					doOrg,
					doPerson
				} = this.archivesData
				let initForm = {
					remark: "",
					preparer: "",
					preparerTime: this.$u.timeFormat(now, 'yyyy-mm-dd hh:MM:ss'),
					contactor: doPerson || '',
					contactorPhone: '',
					statisticsOrg: doOrg || '',
					statisticstor: doPerson || '',
					statisticsTime: currentTime,
					approvaltor: doPerson || '',
					approvalTime: currentTime,
					lossDeviceList: [],
					lossDecorationList: []
				}
				initForm = Object.assign(initForm, local_current_row)
				return initForm
			},
			cleanerForm() {
				this.formData.preparer = ''
				this.formData.preparerTime = ''
				this.formData.contactor = ''
				this.formData.contactorPhone = ''
				this.formData.statisticsOrg = ''
				this.formData.statisticstor = ''
				this.formData.statisticsTime = ''
				this.formData.approvaltor = ''
				this.formData.approvalTime = ''
				this.formData.deviceLoss = []
				this.formData.decorationLoss = []
				console.log('clear -- formData: ', this.formData)
			},
			handleCurrentRow() {
				let {
					jsonStr
				} = this.currentRow;
				jsonStr = jsonStr && jsonStr != "" ? JSON.parse(jsonStr) : [];
				this.formData.createTime = new Date().getTime();
				if (this.currentIndex) {
					this.currentRow.handleType = 2;
					jsonStr.splice(this.currentIndex, 1, this.formData);
				} else {
					this.currentRow.handleType = 1;
					jsonStr.push(this.formData);
				}
				this.currentRow.jsonStr = JSON.stringify(jsonStr);
			},
			async submitFormBefore() {
				this.formData.title = `${this.$u.timeFormat(new Date(), 'yyyymmddhhMM')}`
			},
		}
	};
</script>

<style lang="scss" scoped>
	.template-page {
		.left-page {
			padding-left: 20rpx;
		}
	}

	.item-block {
		.item-line {
			.picker-time {
				border: 1px solid #dcdfe6;
				border-radius: 4px;
				background: white;
				box-sizing: border-box;
				padding-left: 10px !important;
			}
		}
	}

	.item-block {
		margin-bottom: 20px;

		.line-title {
			color: rgba(0, 0, 0, .85);
			font-size: 16px;
			padding-bottom: 10px;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;

			.img {
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}
		}

		.img {
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}

		.uploadIdCardImg {
			padding: 7px 15px;
			height: 28px;
			color: #67C23A;
			background: #f0f9eb;
			border-color: #c2e7b0;
			margin-left: 8px;
		}

		.item-line-2 {
			display: flex;
		}

		.item-line {
			display: flex;
			align-items: center;
			margin: 10px 0;
			position: relative;

			&.half {
				width: 50%;
			}

			.dynamic-item {
				position: relative;
				margin-top: 30px;
				padding-top: 10px;
				border-top: 1px dashed #eee;

				&:first-child {
					border-top: none;
				}

				.delete-btn {
					display: none;
					position: absolute;
					right: 5px;
					top: 15px;
					cursor: pointer;
				}

				&:hover {

					.delete-btn {
						display: block;
					}
				}
			}

			&.textarea {
				align-items: flex-start;
			}

			.label {
				flex-shrink: 0;
				min-width: 80px;
				color: #606266;
				text-align: right;
				font-size: 14px;
			}

			.form-input-item {
				width: 100%;

				&.btn-2 {
					display: flex;
					margin-top: 10px;
				}

				&.picker picker {
					border: 1px solid #dcdfe6;
					height: 35px;
					line-height: 35px;
					padding-left: 10px;
					border-radius: 4px;
				}

				.textarea {
					width: 100%;
					border: 1px solid #DCDFE6;
					border-radius: 4px;
					padding: 15px;
					box-sizing: border-box;
				}

				.upload-record-audio,
				.record-all-screen,
				.record-all-audio {
					background-color: #3196fA;
					color: #fff;
					font-size: 12px;
					border-radius: 3px;
					height: 32px;
				}

				.upload-record-audio {
					padding: 9px 15px;
					margin-bottom: 10px;
				}

				.record-all-audio {
					margin-left: 8px;
				}

				.map-input {
					display: flex;
					align-items: center;
					padding-left: 10px;
					height: 42px;
					color: #999;
					font-size: 12px;
					border-radius: 4px;
					border: 1px solid #dcdfe6;

					&.has-value {
						color: #606266;
					}
				}
			}

			.uni-forms-item {}
		}
	}

	.add-form-popup {
		width: 60vw;
		padding: 30px;
		overflow-y: scroll;
		max-height: 80vh;
		background-color: #fff;
	}

	.item-block {
		width: 100%;
		padding: 15px;
		background-color: #fff;
	}

	.item-block,
	.add-form-popup {

		.item-line {
			display: flex;
			align-items: center;
			margin: 10px 0;

			&.half {
				width: 50%;
			}

			&.textarea {
				align-items: flex-start;
			}

			&.sign-wrapper {
				display: flex;
				align-items: center;

				.sign-img {
					width: 100px;
					height: 35px;
				}

				.form-input-item {
					display: flex;
					align-items: center;
				}
			}

			.label {
				flex-shrink: 0;
				min-width: 80px;
				color: #606266;
				text-align: right;
				font-size: 14px;
			}

			.form-input-item {
				width: 100%;

				&.btn-2 {
					display: flex;
					margin-top: 10px;
				}

				.textarea {
					width: 100%;
					border: 1px solid #DCDFE6;
					border-radius: 4px;
					padding: 15px;
					box-sizing: border-box;
				}

				.upload-record-audio,
				.record-all-screen,
				.record-all-audio {
					background-color: #3196fA;
					color: #fff;
					font-size: 12px;
					border-radius: 3px;
					height: 32px;
				}

				.upload-record-audio {
					padding: 9px 15px;
					margin-bottom: 10px;
				}

				.record-all-audio {
					margin-left: 8px;
				}

				.map-input {
					display: flex;
					align-items: center;
					padding-left: 10px;
					height: 42px;
					color: #999;
					font-size: 12px;
					border-radius: 4px;
					border: 1px solid #dcdfe6;

					&.has-value {
						color: #606266;
					}
				}

				.uploadIdCardImg {
					display: inline-block;
					padding: 0 15px;
					height: 32px;
					line-height: 32px;
					color: #67C23A;
					background: #f0f9eb;
					border-color: #c2e7b0;
					margin-left: 8px;
					font-size: 14px;
				}
			}
		}

		.buttons {
			display: flex;
			justify-content: flex-end;
			margin-top: 30rpx;

			.btn {
				margin: 0 0 0 10px;
			}
		}
	}
</style>